<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>淘票票</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="./js/axios.min.js"></script>
    <style>
        #box p {
            color: red;
        }

        #box {
            width: 180px;
            margin: 0 auto;
        }

        .dianiji {
            width: 800px;
            height: 350px;
            margin: 0 auto;
            background-color: pink;
            padding-top: 50px;
        }

        .dianiji span {
            width: 50px;
            height: 50px;
            /* background-color: red; */
            margin: 10px 10px;
            border: 1px solid black;
            display: inline-block;
            text-align: center;
            line-height: 50px;
        }

        button {
            width: 100px;
            height: 50px;
            display:inline-block;
            margin: 20px auto;
            background-color: red;

        }
        #ipt{
    margin-top: 20px;
    margin-left: 675px;
    width: 30px;
    
}
    </style>
    </style>
</head>

<body>
    <header>
        <div class="top">
            <ul class="top-left">
                <li><a href="login.html">亲，请登录</a></li>
                <li><a href="reg.html">免费注册</a></li>
                <li><a href="#">手机逛淘宝</a></li>
            </ul>
            <ul class="top-right">
                <li><a href="https://www.taobao.com/">淘宝网首页</a></li>
                <li class="dropdown">
                    <a href="#">我的淘宝</a>
                    <ul class="dropdown__content">
                        <li><a href="#">已买到的宝贝</a></li>
                        <li><a href="#">我的足迹</a></li>
                    </ul>
                </li>
                <li><a href="cart.html">购物车</a></li>
                <li class="dropdown">
                    <a href="#">收藏夹</a>
                    <ul class="dropdown__content">
                        <li><a href="#">收藏的宝贝</a></li>
                        <li><a href="#">收藏的店铺</a></li>
                    </ul>
                </li>
                <li><a href="#">商品分类</a></li>
                <li><a href="#">免费开店</a></li>
                <li class="dropdown">
                    <a href="#">千牛卖家中心</a>
                    <ul class="dropdown__content">
                        <li><a href="#">免费开店</a></li>
                        <li><a href="#">已卖出的宝贝</a></li>
                        <li><a href="#">出售中的宝贝</a></li>
                        <li><a href="#">卖家服务市场</a></li>
                        <li><a href="#">卖家培训中心</a></li>
                        <li><a href="#">体检中心</a></li>
                        <li><a href="#">问商友</a></li>
                    </ul>
                </li>
                <li><a href="#">联系客户</a></li>
                <li><a href="#">网站导航</a></li>
            </ul>
        </div>
    </header>
    <nav>
        <div>
            <img src="img/01.png" alt="">
            <ul>
                <li> <a href="#">郑州</a></li>
                <li><a href="index.html" style="color: #6b6b6b;">首页</a></li>
                <li>影片</li>
                <li>影院</li>
            </ul>
            <p>
                <a href="#">手机购买</a>
                <a href="#">客服咨询</a>
            </p>
        </div>
    </nav>
    <div id="box">
        <!-- <h1></h1>
      <p></p>
      <img src="" alt="" />
      <p></p>
      <button onclick="addCart()">加入购物车</button> -->
    </div>
    <div class="dianiji">
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">1</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">2</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">3</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">4</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">5</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">6</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">7</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">8</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">9</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">10</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">11</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">12</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">13</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">14</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">15</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">16</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">17</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">18</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">19</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">20</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">21</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">22</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">23</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">24</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">25</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">26</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">27</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">28</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">29</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">30</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">31</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">32</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">33</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">34</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">35</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">36</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">37</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">38</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">39</span>
        <span style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">40</span>
    </div>
    <input type="number" name="" id="ipt" value="1">
    <button onclick="addCart()">加入购物车</button>
    <script>
        function selFuc(obj) {
            if (obj.style.backgroundColor == "rgb(255, 255, 255)") {
                obj.style.backgroundColor = "red";
            } else {
                obj.style.backgroundColor = "rgb(255, 255, 255)";
            }

        }


        async function addCart() {
            // 获取参数
            let uid = localStorage.getItem("id");
            pid;
            let ipt = document.querySelector("#ipt");
            let pnum = ipt.value;
            let params = {
                uid,
                pid,
                pnum
            };
            // console.log(params);
            let addCartAPI = "http://jx.xuzhixiang.top/ap/api/add-product.php";
            let res = await axios.get(addCartAPI, {
                params
            });
            // console.log(res.data);
            alert("加入购物车成功");
        }
    </script>
    <div class="footer" style="margin-top:0px">
        <div class="footWrap">
            <div class="footMiddle" style="height: 150px;">
                <div class="footLogo">
                    <a href="#"><img src="img/TB.png" /></a>
                    <span>如果您是消费者，</span>
                    <span>请拨打0571-88157838</span>
                    <span>如果您是影院/合作商家，</span>
                    <span>请拨打400-825-9220</span>
                    <span>(服务时间:9:00-21:00)</span>
                </div>
                <dl>
                    <dt>选座购票流程</dt>
                    <dd><a href="#" target="_blank" title="选择影片和场次">选择影片和场次</a></dd>
                    <dd><a href="#" target="_blank" title="选择中意的座位">选择中意的座位</a></dd>
                    <dd><a href="#" target="_blank" title="支付并收到取票短信">支付并收到取票短信</a></dd>
                </dl>
                <dl>
                    <dt>取票流程</dt>
                    <dd><a href="#" target="_blank" title="收到取票短信">收到取票短信</a></dd>
                    <dd><a href="#" target="_blank" title="影院自助取票">影院自助取票</a></dd>
                    <dd><a href="#" target="_blank" title="短信重发方式">短信重发方式</a></dd>
                </dl>
                <dl>
                    <dt>常见问题</dt>
                    <dd><a href="#" target="_blank" title="是否支持退换票">是否支持退换票</a></dd>
                    <dd><a href="#" target="_blank" title="填错手机号怎么办">填错手机号怎么办</a></dd>
                    <dd><a href="#" target="_blank" title="更多问题>>">更多问题>></a></dd>
                </dl>
                <dl>
                    <dt>协议规范</dt>
                    <dd><a href="#" target="_blank" title="用户服务协议">用户服务协议</a></dd>
                    <dd><a href="#" target="_blank" title="食品管理规范">食品管理规范</a></dd>
                    <dd><a href="#" target="_blank" title="隐私权政策">隐私权政策</a></dd>
                    <dd><a href="#" target="_blank" title="退改签服务费规范">退改签服务费规范</a></dd>
                </dl>
                <div class="order-code" style="background-image:url(./img/xiaz.png); width:200px;">
                </div>
            </div>
            <div class="footBottom" style="height: 140px">
                <img class="img" src="img/T1.png">
                <div class="footer-ali">
                    <a href="#" data-spm-anchor-id="1.1000386.245549.1">阿里巴巴集团</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.2">阿里巴巴国际站</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.3">阿里巴巴中国站</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.4">全球速卖通</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.5">淘宝网</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.6">天猫</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.7">聚划算</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.8">一淘</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.9">阿里妈妈</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.10">阿里云计算</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.11">云OS</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.12">万网</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.13">中国雅虎</a>
                    <b>|</b>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.14">支付宝</a>
                </div>
                <div class="foot-nav">
                    <a href="#" data-spm-anchor-id="1.1000386.245549.15">关于淘宝</a>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.16">合作伙伴</a>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.17">营销中心</a>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.18">联系客服</a>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.19">开放平台</a>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.20">诚征英才</a>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.21">联系我们</a>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.22">网站地图</a>
                    <a href="#" data-spm-anchor-id="1.1000386.245549.23">法律声明</a>
                    <span>&copy; 2017 Taopiaopiao.com 版权所有</span><br>增值电信业务经营许可证：沪B2-20170117 <a href="#"
                        target="_blank">沪ICP备16050036号-1</a> <a href="#" target="_blank" title="营业执照"> 营业执照</a>
                    <br><span>违法不良信息举报电话 0571-88157838</span>
                    <br><span>违法不良信息举报邮箱 taopiaopiao_tousu@list.alibaba-inc.com</span>
                </div>

            </div>
        </div>
    </div>
    <script>
        //   把搜索字符串 ？id=22&a=2&b=2 转为对象
        let searchObj = new URLSearchParams(location.search);
        // console.log(searchObj);
        //获取 id 的值
        let pid = searchObj.get("id");
        // console.log(pid);
        let detailProductAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
        axios.get(detailProductAPI, {
            params: {
                id: pid
            }
        }).then((r) => {
            //r.data 服务器返回的数据
            let pObj = r.data.data;
            // console.log(pObj);
            if (pObj) {
                // Cannot read properties of null (reading 'pname')
                let str = `<h3>${pObj.pname}</h3>  
                    `;
                let box = document.querySelector("#box");
                box.innerHTML = str;
            }
        });

        async function addCart() {
            // 获取参数
            let uid = localStorage.getItem("id");
            pid;
            let ipt = document.querySelector("#ipt");
            let pnum = ipt.value;
            let params = {
                uid,
                pid,
                pnum
            };

            console.log(params);
            let addCartAPI = "http://jx.xuzhixiang.top/ap/api/add-product.php";
            let res = await axios.get(addCartAPI, {
                params
            });
            // console.log(res.data);
            alert("加入购物车成功");
        }

        function toMyCart() {
            // 获取参数
            let uid = localStorage.getItem("id");
            if (uid) {
                location.href = "cart.html";
            } else {
                location.href = "login.html";
            }
        }
    </script>
</body>

</html>